<template>
	<view class="record">
		<!-- 交费历史记录页 -->
		<view v-for="item in detailList" :key="item.id" class="list">
			<view>充值类型：<text>{{item.title}}</text></view>
			<view>支付方式：<text>{{item.paymentType}}</text></view>
			<view>用 户 i d ：<text>{{item.userId}}</text></view>
			<view>手 机 号 ：<text>{{item.phonenumber}}</text></view>
			<view>充值金额：<text>
				<!-- 充值/支付金额小于等于0元，默认都会显示为0元 -->
				{{item.rechargeAmount<=0? '少于0.01':item.rechargeAmount}}元
				</text></view>
			<view>支付金额：<text>
				{{item.paymentAmount<=0? '少于0.01':item.paymentAmount}}元
				</text></view>
			<view>交费日期：<text>{{item.rechargeTime}}</text></view>
		</view>
		
		<view v-if="detailList==''" class="noData">暂无记录</view>
	</view>
</template>

<script>
	import { http } from "../../utils/request.js"
	export default {
		data() {
			return {
				detailList:[]
			};
		},
		onLoad() {
			this.getDetail()
		},
		methods:{
			// 获取交费历史记录
			getDetail(){
				http({
					url: "/prod-api/api/living/phone/record/list"
				}).then(res=>{
					if(res.data.code==200){
						this.detailList=res.data.rows
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.record{
	padding: 40rpx;
	.list{
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 40rpx;
		view{
			font-weight: normal;
			text{
				font-weight: bold;
			}
		}
	}
	.list:nth-child(1){
		margin-top: 0;
	}
	.noData{
		text-align: center;
		font-weight: bold;
		font-size: 50rpx;
		color: #ccc;
	}
}
</style>